* {
  margin: 0;
  padding: 0;
}
html, body {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}
.container {
  width: 200px;
  height: 200px;
  margin: 100px 100px;
  background-color: skyblue;
  border-radius: 50px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, .6);
}
@keyframes breathe {
  0% {
    opacity: 0.2;
    box-shadow: 0 4px 6px rgba(255, 255, 255, .3);
  }
  50% {
    opacity: 0.5;
    box-shadow: 0 4px 6px rgba(18, 190, 84, .7);
  }
  100% {
    opacity: 1;
    box-shadow: 0 4px 10px rgba(59, 255, 255, 1);
  }
}
.container:hover {
  animation: breathe 2s ease-in-out infinite alternate;
}